@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
  --pattern-opacity: 0.4;
  --background: 0 0% 100%;
  --background-alt: 210 40% 98%;
  --foreground: 222.2 84% 4.9%;
  --text-primary: 222.2 84% 4.9%;
  --text-secondary: 215.4 16.3% 46.9%;
  --text-tertiary: 215 20.2% 65.1%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 70%;
  --input: 214.3 31.8% 70%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  
  /* Sidebar and header backgrounds */
  --sidebar-background: 210 40% 96.1%;
  --header-background: 210 40% 96.1%;
  --stats-background: 210 40% 99%;
  
  /* Code block colors for light mode */
  --code-background: 210 40% 96.1%;
  --code-foreground: 222.2 84% 4.9%;
  
  /* Tab styling */
  --tab-list-background: 210 40% 96.1%;
  --tab-trigger-background: transparent;
  --tab-trigger-active-background: 0 0% 100%;
  --tab-trigger-hover-background: 210 40% 94%;
}

.dark {
  --pattern-opacity: 0.2;
  /* Soft, muted dark backgrounds with warm undertones */
  --background: 220 13% 9%; /* Deep charcoal with subtle blue undertone */
  --background-alt: 218 11% 12%; /* Slightly lighter warm charcoal */
  --foreground: 220 9% 92%; /* Soft off-white, not harsh white */
  --text-primary: 220 9% 92%;
  --text-secondary: 220 9% 70%; /* Muted light gray */
  --text-tertiary: 220 8% 50%; /* Medium muted gray */
  
  /* Card and surface colors */
  --card: 218 11% 15%; /* Warm dark surface */
  --card-foreground: 220 9% 92%;
  --popover: 220 13% 9%;
  --popover-foreground: 220 9% 92%;
  
  /* Primary accent - soft lavender */
  --primary: 250 20% 75%; /* Muted lavender */
  --primary-foreground: 220 13% 9%;
  
  /* Secondary surfaces - warm grays */
  --secondary: 218 10% 18%; /* Warm medium gray */
  --secondary-foreground: 220 9% 85%;
  --muted: 218 8% 20%; /* Slightly lighter muted surface */
  --muted-foreground: 220 9% 75%;
  
  /* Accent colors - soft sage green */
  --accent: 150 15% 65%; /* Muted sage green */
  --accent-foreground: 220 13% 9%;
  
  /* Destructive - muted coral */
  --destructive: 10 40% 65%; /* Soft coral instead of harsh red */
  --destructive-foreground: 220 13% 9%;
  
  /* Borders and inputs */
  --border: 218 8% 25%; /* Subtle border */
  --input: 218 10% 18%; /* Input background */
  --ring: 250 20% 75%; /* Focus ring matches primary */
  
  /* Sidebar and header backgrounds - slightly different tones for depth */
  --sidebar-background: 218 10% 16%; /* Slightly warmer sidebar */
  --header-background: 218 11% 14%; /* Subtle header distinction */
  --stats-background: 218 11% 17%; /* Stats panel background */
  
  /* Code block colors for dark mode */
  --code-background: 220 13% 12%; /* Darker background for code blocks */
  --code-foreground: 220 9% 85%; /* Soft light text */
  
  /* Tab styling - cohesive with overall theme */
  --tab-list-background: 218 10% 16%;
  --tab-trigger-background: transparent;
  --tab-trigger-active-background: 218 11% 20%; /* Active tab slightly lighter */
  --tab-trigger-hover-background: 218 10% 22%; /* Hover state */
}
}

/* Semantic text color classes */
@layer components {
  .text-primary {
    color: hsl(var(--text-primary));
  }
  
  .text-secondary {
    color: hsl(var(--text-secondary));
  }
  
  .text-tertiary {
    color: hsl(var(--text-tertiary));
  }
  
  .text-muted {
    color: hsl(var(--muted-foreground));
  }
  
  .bg-muted {
    background-color: hsl(var(--muted));
  }
  
  .bg-secondary {
    background-color: hsl(var(--secondary));
  }
  
  /* Code block styling utilities */
  .bg-code-background {
    background-color: hsl(var(--code-background));
  }
  
  .text-code-foreground {
    color: hsl(var(--code-foreground));
  }
  
  /* Inline code styling */
  .inline-code {
    background-color: hsl(var(--code-background)) !important;
    color: hsl(var(--code-foreground)) !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.6875rem !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace !important;
  }
  
  /* Default badge styling */
  .badge-default {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
  }
  
  /* Interactive elements */
  .text-interactive {
    color: hsl(var(--muted-foreground));
    transition: color 0.2s ease-in-out;
  }
  
  .text-interactive:hover {
    color: hsl(var(--foreground));
  }
  
  /* Enhanced input styling for better contrast in light mode */
  input[type="text"], 
  input[type="email"], 
  input[type="password"], 
  input[type="number"], 
  input[type="url"], 
  textarea, 
  select {
    border: 1.5px solid hsl(var(--border));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  
  input[type="text"]:focus, 
  input[type="email"]:focus, 
  input[type="password"]:focus, 
  input[type="number"]:focus, 
  input[type="url"]:focus, 
  textarea:focus, 
  select:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 0 0 3px hsl(var(--ring) / 0.1);
    outline: none;
  }
  
  /* Enhanced button styling */
  button {
    transition: all 0.2s ease-in-out;
  }
  
  /* Outline button styling */
  button[data-variant="outline"] {
    border: 1.5px solid hsl(var(--border));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
  
  button[data-variant="outline"]:hover {
    border-color: hsl(var(--ring));
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
  }
  
  /* Force input backgrounds to be white with visible borders in light mode ONLY */
  html:not(.dark) input[class*="bg-background"],
  html:not(.dark) .bg-background input,
  html:not(.dark) input.bg-background {
    background-color: white !important;
    border: 1.5px solid hsl(var(--input)) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
  }
  
  html:not(.dark) input[class*="bg-background"]:focus,
  html:not(.dark) .bg-background input:focus,
  html:not(.dark) input.bg-background:focus {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 0 0 3px hsl(var(--ring) / 0.1) !important;
  }
  
  /* Ensure dark mode inputs keep their proper dark backgrounds */
  html.dark input[class*="bg-background"],
  html.dark .bg-background input,
  html.dark input.bg-background {
    background-color: hsl(var(--input)) !important;
    border: 1.5px solid hsl(var(--border)) !important;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  /* Styling for markdown content in chat bubbles */
  .prose {
    /* Default text color */
    color: inherit;
    font-size: 0.75rem; /* 12px - smaller base font size */
    line-height: 1.4;
  }

  /* Compact headings for all prose content */
  .prose h1 {
    color: inherit;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
  }

  .prose h2 {
    color: inherit;
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
  }

  .prose h3 {
    color: inherit;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    margin-top: 0.375rem;
    margin-bottom: 0.1875rem;
    line-height: 1.3;
  }

  .prose h4, .prose h5, .prose h6 {
    color: inherit;
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    margin-top: 0.25rem;
    margin-bottom: 0.125rem;
    line-height: 1.3;
  }

  /* Compact paragraphs */
  .prose p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
  }

  .prose p:last-child {
    margin-bottom: 0;
  }

  /* Compact lists */
  .prose ul, .prose ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
  }

  .prose li {
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
    margin-bottom: 0.125rem;
  }

  .prose strong {
    color: inherit;
    font-size: inherit;
    font-weight: bold;
  }

  .prose a {
    @apply text-blue-500;
    font-size: inherit;
  }

  .prose code {
    background-color: hsl(var(--code-background));
    color: hsl(var(--code-foreground));
    @apply rounded px-1 py-0.5;
    font-size: 0.6875rem; /* 11px */
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  }

  .prose pre {
    background-color: hsl(var(--code-background));
    color: hsl(var(--code-foreground));
    @apply rounded-md p-3;
    font-size: 0.6875rem; /* 11px */
    line-height: 1.4;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Dark mode prose styling */
  .dark .prose a {
    color: hsl(250 20% 75%); /* Soft lavender links */
  }

  .dark .prose a:hover {
    color: hsl(250 25% 80%); /* Slightly brighter on hover */
  }

  .dark .prose code {
    background-color: hsl(var(--code-background));
    color: hsl(var(--code-foreground));
  }

  .dark .prose pre {
    background-color: hsl(var(--code-background));
    color: hsl(var(--code-foreground));
  }

  .dark .prose blockquote {
    border-left-color: hsl(218 8% 35%); /* Muted border */
    color: hsl(220 9% 75%); /* Slightly muted text */
  }

  .prose pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
  }

  .prose blockquote {
    @apply border-l-4 border-gray-300 pl-3 italic;
    font-size: 0.75rem; /* 12px */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Tables */
  .prose table {
    font-size: 0.6875rem; /* 11px */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .prose th, .prose td {
    padding: 0.25rem 0.5rem;
    font-size: inherit;
  }

  /* Ensure user message text remains white */
  .bg-blue-600 .prose {
    color: white;
  }

  .bg-blue-600 .prose a {
    @apply text-blue-300 hover:text-blue-200;
  }

  .bg-blue-600 .prose code {
    @apply bg-blue-500 text-white;
  }

  .bg-blue-600 .prose pre {
    @apply bg-blue-900;
  }

  .bg-blue-600 .prose blockquote {
    @apply border-blue-400;
  }

  /* Primary color user messages */
  .bg-primary .prose {
    color: hsl(var(--primary-foreground));
  }

  .bg-primary .prose a {
    color: rgba(255, 255, 255, 0.8);
  }

  .bg-primary .prose code {
    background: rgba(255, 255, 255, 0.2);
    color: hsl(var(--primary-foreground));
  }

  .bg-primary .prose pre {
    background: rgba(0, 0, 0, 0.3);
  }

  .bg-primary .prose blockquote {
    border-left-color: rgba(255, 255, 255, 0.5);
  }
}

/* Scrollbar styles - Improved for better visibility */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border) / 0.5);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
  background-clip: padding-box;
}

/* Custom scrollbar for settings dialog */
.settings-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.settings-scrollbar::-webkit-scrollbar-track {
  background: hsl(var(--background));
  border-radius: 4px;
  margin: 4px 0;
}

.settings-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}

.settings-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.7);
}

/* Color Scheme Variants */

/* Light Theme Variants */
.theme-light-blue {
  --background: 220 20% 94%; /* soft blue-tinted background */
  --background-alt: 220 15% 91%; /* very light blue */
  --card: 220 10% 96%; /* card background */
  --primary: 220 70% 55%; /* blue primary */
  --primary-foreground: 220 20% 98%;
  --secondary: 220 15% 90%; /* soft blue secondary */
  --secondary-foreground: 220 70% 25%;
  --muted: 220 15% 90%;
  --muted-foreground: 220 20% 40%;
  --accent: 220 30% 85%; /* light blue accent */
  --accent-foreground: 220 70% 25%;
  --border: 220 20% 85%; /* light blue border */
  --input: 220 10% 95%; /* white input background */
  --ring: 220 70% 55%; /* blue focus ring */
  --code-background: 220 15% 90%;
  --code-foreground: 220 70% 25%;
  --sidebar-background: 220 15% 92%;
  --header-background: 220 15% 92%;
  --stats-background: 220 10% 95%;
  --tab-list-background: 220 15% 92%;
  --tab-trigger-active-background: 220 10% 95%;
  --tab-trigger-hover-background: 220 15% 90%;
}

.theme-light-emerald {
  --background: 150 20% 94%; /* soft green-tinted background */
  --background-alt: 150 15% 91%; /* very light green */
  --card: 150 10% 96%; /* card background */
  --primary: 150 60% 45%; /* emerald primary */
  --primary-foreground: 150 20% 98%;
  --secondary: 150 15% 90%; /* soft green secondary */
  --secondary-foreground: 150 60% 20%;
  --muted: 150 15% 90%;
  --muted-foreground: 150 20% 40%;
  --accent: 150 30% 85%; /* light green accent */
  --accent-foreground: 150 60% 20%;
  --border: 150 20% 85%; /* light green border */
  --input: 150 10% 95%; /* white input background */
  --ring: 150 60% 45%; /* emerald focus ring */
  --code-background: 150 15% 90%;
  --code-foreground: 150 60% 20%;
  --sidebar-background: 150 15% 92%;
  --header-background: 150 15% 92%;
  --stats-background: 150 10% 95%;
  --tab-list-background: 150 15% 92%;
  --tab-trigger-active-background: 150 10% 95%;
  --tab-trigger-hover-background: 150 15% 90%;
}

.theme-light-purple {
  --background: 270 20% 94%; /* soft purple-tinted background */
  --background-alt: 270 15% 91%; /* very light purple */
  --card: 270 10% 96%; /* card background */
  --primary: 270 60% 55%; /* purple primary */
  --primary-foreground: 270 20% 98%;
  --secondary: 270 15% 90%; /* soft purple secondary */
  --secondary-foreground: 270 60% 25%;
  --muted: 270 15% 90%;
  --muted-foreground: 270 20% 40%;
  --accent: 270 30% 85%; /* light purple accent */
  --accent-foreground: 270 60% 25%;
  --border: 270 20% 85%; /* light purple border */
  --input: 270 10% 95%; /* white input background */
  --ring: 270 60% 55%; /* purple focus ring */
  --code-background: 270 15% 90%;
  --code-foreground: 270 60% 25%;
  --sidebar-background: 270 15% 92%;
  --header-background: 270 15% 92%;
  --stats-background: 270 10% 95%;
  --tab-list-background: 270 15% 92%;
  --tab-trigger-active-background: 270 10% 95%;
  --tab-trigger-hover-background: 270 15% 90%;
}

.theme-light-rose {
  --background: 350 20% 94%; /* soft rose-tinted background */
  --background-alt: 350 15% 91%; /* very light rose */
  --card: 350 10% 96%; /* card background */
  --primary: 350 70% 55%; /* rose primary */
  --primary-foreground: 350 20% 98%;
  --secondary: 350 15% 90%; /* soft rose secondary */
  --secondary-foreground: 350 70% 25%;
  --muted: 350 15% 90%;
  --muted-foreground: 350 20% 40%;
  --accent: 350 30% 85%; /* light rose accent */
  --accent-foreground: 350 70% 25%;
  --border: 350 20% 85%; /* light rose border */
  --input: 350 10% 95%; /* white input background */
  --ring: 350 70% 55%; /* rose focus ring */
  --code-background: 350 15% 90%;
  --code-foreground: 350 70% 25%;
  --sidebar-background: 350 15% 92%;
  --header-background: 350 15% 92%;
  --stats-background: 350 10% 95%;
  --tab-list-background: 350 15% 92%;
  --tab-trigger-active-background: 350 10% 95%;
  --tab-trigger-hover-background: 350 15% 90%;
}

.theme-light-amber {
  --background: 45 20% 94%; /* soft amber-tinted background */
  --background-alt: 45 15% 91%; /* very light amber */
  --card: 45 10% 96%; /* card background */
  --primary: 45 90% 50%; /* amber primary */
  --primary-foreground: 45 20% 98%;
  --secondary: 45 15% 90%; /* soft amber secondary */
  --secondary-foreground: 45 90% 25%;
  --muted: 45 15% 90%;
  --muted-foreground: 45 20% 40%;
  --accent: 45 30% 85%; /* light amber accent */
  --accent-foreground: 45 90% 25%;
  --border: 45 20% 85%; /* light amber border */
  --input: 45 10% 95%; /* white input background */
  --ring: 45 90% 50%; /* amber focus ring */
  --code-background: 45 15% 90%;
  --code-foreground: 45 90% 25%;
  --sidebar-background: 45 15% 92%;
  --header-background: 45 15% 92%;
  --stats-background: 45 10% 95%;
  --tab-list-background: 45 15% 92%;
  --tab-trigger-active-background: 45 10% 95%;
  --tab-trigger-hover-background: 45 15% 90%;
}

.theme-light-teal {
  --background: 180 20% 94%; /* soft teal-tinted background */
  --background-alt: 180 15% 91%; /* very light teal */
  --card: 180 10% 96%; /* card background */
  --primary: 180 60% 45%; /* teal primary */
  --primary-foreground: 180 20% 98%;
  --secondary: 180 15% 90%; /* soft teal secondary */
  --secondary-foreground: 180 60% 20%;
  --muted: 180 15% 90%;
  --muted-foreground: 180 20% 40%;
  --accent: 180 30% 85%; /* light teal accent */
  --accent-foreground: 180 60% 20%;
  --border: 180 20% 85%; /* light teal border */
  --input: 180 10% 95%; /* white input background */
  --ring: 180 60% 45%; /* teal focus ring */
  --code-background: 180 15% 90%;
  --code-foreground: 180 60% 20%;
  --sidebar-background: 180 15% 92%;
  --header-background: 180 15% 92%;
  --stats-background: 180 10% 95%;
  --tab-list-background: 180 15% 92%;
  --tab-trigger-active-background: 180 10% 95%;
  --tab-trigger-hover-background: 180 15% 90%;
}

/* Dark Theme Variants */
.dark.theme-dark-blue {
  --background: 220 15% 8%; /* dark with blue tint */
  --background-alt: 220 12% 12%; /* medium dark with blue hint */
  --card: 220 10% 15%; /* card background */
  --primary: 220 50% 70%; /* muted blue primary */
  --primary-foreground: 220 15% 8%;
  --secondary: 220 8% 18%; /* dark blue secondary */
  --secondary-foreground: 220 50% 85%;
  --muted: 220 8% 20%;
  --muted-foreground: 220 15% 65%;
  --accent: 220 30% 25%; /* dark blue accent */
  --accent-foreground: 220 50% 85%;
  --border: 220 8% 25%; /* visible blue border */
  --input: 220 8% 18%; /* dark blue input background */
  --ring: 220 50% 70%; /* blue focus ring */
  --code-background: 220 15% 12%;
  --code-foreground: 220 50% 85%;
  --sidebar-background: 220 10% 16%;
  --header-background: 220 12% 14%;
  --stats-background: 220 10% 17%;
  --tab-list-background: 220 10% 16%;
  --tab-trigger-active-background: 220 8% 20%;
  --tab-trigger-hover-background: 220 8% 22%;
}

.dark.theme-dark-emerald {
  --background: 150 15% 8%; /* dark with emerald tint */
  --background-alt: 150 12% 12%; /* medium dark with emerald hint */
  --card: 150 10% 15%; /* card background */
  --primary: 150 50% 65%; /* muted emerald primary */
  --primary-foreground: 150 15% 8%;
  --secondary: 150 8% 18%; /* dark emerald secondary */
  --secondary-foreground: 150 50% 85%;
  --muted: 150 8% 20%;
  --muted-foreground: 150 15% 65%;
  --accent: 150 30% 25%; /* dark emerald accent */
  --accent-foreground: 150 50% 85%;
  --border: 150 8% 25%; /* visible emerald border */
  --input: 150 8% 18%; /* dark emerald input background */
  --ring: 150 50% 65%; /* emerald focus ring */
  --code-background: 150 15% 12%;
  --code-foreground: 150 50% 85%;
  --sidebar-background: 150 10% 16%;
  --header-background: 150 12% 14%;
  --stats-background: 150 10% 17%;
  --tab-list-background: 150 10% 16%;
  --tab-trigger-active-background: 150 8% 20%;
  --tab-trigger-hover-background: 150 8% 22%;
}

.dark.theme-dark-purple {
  --background: 270 15% 8%; /* dark with purple tint */
  --background-alt: 270 12% 12%; /* medium dark with purple hint */
  --card: 270 10% 15%; /* card background */
  --primary: 270 50% 70%; /* muted purple primary */
  --primary-foreground: 270 15% 8%;
  --secondary: 270 8% 18%; /* dark purple secondary */
  --secondary-foreground: 270 50% 85%;
  --muted: 270 8% 20%;
  --muted-foreground: 270 15% 65%;
  --accent: 270 30% 25%; /* dark purple accent */
  --accent-foreground: 270 50% 85%;
  --border: 270 8% 25%; /* visible purple border */
  --input: 270 8% 18%; /* dark purple input background */
  --ring: 270 50% 70%; /* purple focus ring */
  --code-background: 270 15% 12%;
  --code-foreground: 270 50% 85%;
  --sidebar-background: 270 10% 16%;
  --header-background: 270 12% 14%;
  --stats-background: 270 10% 17%;
  --tab-list-background: 270 10% 16%;
  --tab-trigger-active-background: 270 8% 20%;
  --tab-trigger-hover-background: 270 8% 22%;
}

.dark.theme-dark-rose {
  --background: 350 15% 8%; /* dark with rose tint */
  --background-alt: 350 12% 12%; /* medium dark with rose hint */
  --card: 350 10% 15%; /* card background */
  --primary: 350 50% 70%; /* muted rose primary */
  --primary-foreground: 350 15% 8%;
  --secondary: 350 8% 18%; /* dark rose secondary */
  --secondary-foreground: 350 50% 85%;
  --muted: 350 8% 20%;
  --muted-foreground: 350 15% 65%;
  --accent: 350 30% 25%; /* dark rose accent */
  --accent-foreground: 350 50% 85%;
  --border: 350 8% 25%; /* visible rose border */
  --input: 350 8% 18%; /* dark rose input background */
  --ring: 350 50% 70%; /* rose focus ring */
  --code-background: 350 15% 12%;
  --code-foreground: 350 50% 85%;
  --sidebar-background: 350 10% 16%;
  --header-background: 350 12% 14%;
  --stats-background: 350 10% 17%;
  --tab-list-background: 350 10% 16%;
  --tab-trigger-active-background: 350 8% 20%;
  --tab-trigger-hover-background: 350 8% 22%;
}

.dark.theme-dark-amber {
  --background: 45 15% 8%; /* dark with amber tint */
  --background-alt: 45 12% 12%; /* medium dark with amber hint */
  --card: 45 10% 15%; /* card background */
  --primary: 45 70% 65%; /* muted amber primary */
  --primary-foreground: 45 15% 8%;
  --secondary: 45 8% 18%; /* dark amber secondary */
  --secondary-foreground: 45 70% 85%;
  --muted: 45 8% 20%;
  --muted-foreground: 45 15% 65%;
  --accent: 45 30% 25%; /* dark amber accent */
  --accent-foreground: 45 70% 85%;
  --border: 45 8% 25%; /* visible amber border */
  --input: 45 8% 18%; /* dark amber input background */
  --ring: 45 70% 65%; /* amber focus ring */
  --code-background: 45 15% 12%;
  --code-foreground: 45 70% 85%;
  --sidebar-background: 45 10% 16%;
  --header-background: 45 12% 14%;
  --stats-background: 45 10% 17%;
  --tab-list-background: 45 10% 16%;
  --tab-trigger-active-background: 45 8% 20%;
  --tab-trigger-hover-background: 45 8% 22%;
}

.dark.theme-dark-teal {
  --background: 180 15% 8%; /* dark with teal tint */
  --background-alt: 180 12% 12%; /* medium dark with teal hint */
  --card: 180 10% 15%; /* card background */
  --primary: 180 50% 65%; /* muted teal primary */
  --primary-foreground: 180 15% 8%;
  --secondary: 180 8% 18%; /* dark teal secondary */
  --secondary-foreground: 180 50% 85%;
  --muted: 180 8% 20%;
  --muted-foreground: 180 15% 65%;
  --accent: 180 30% 25%; /* dark teal accent */
  --accent-foreground: 180 50% 85%;
  --border: 180 8% 25%; /* visible teal border */
  --input: 180 8% 18%; /* dark teal input background */
  --ring: 180 50% 65%; /* teal focus ring */
  --code-background: 180 15% 12%;
  --code-foreground: 180 50% 85%;
  --sidebar-background: 180 10% 16%;
  --header-background: 180 12% 14%;
  --stats-background: 180 10% 17%;
  --tab-list-background: 180 10% 16%;
  --tab-trigger-active-background: 180 8% 20%;
  --tab-trigger-hover-background: 180 8% 22%;
}
